<template>
  <div class="m_wrapper mb54 mt53">
    <van-tabs
      animated
      swipeable
      title-active-color="#48a5f4"
      color="transparent"
      @click="changetab"
    >
      <van-tab title="推荐" name="推荐">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="pulluprefresh"
        >
          <div class="article_wrap">
            <div v-for="item in recommendlist" :key="item.id">
              <div
                class="con_wrap"
                @click="goarticledetail(item.id, item.cate)"
              >
                <div :class="item.cover == '' ? 'div_quan' : 'div_lf'">
                  <div class="con_wrap_titel">{{ item.title }}</div>
                  <div class="con_wrap_desc">
                    {{ item.desc }}
                  </div>
                </div>
                <div class="div_rt" v-if="item.cover !== ''">
                  <img :src="item.cover" alt="" class="con_pic" />
                </div>
                <div class="bot_con">
                  <div class="ban">阅读 {{ item.look }} · {{ item.user }}</div>
                  <span class="mark">{{ item.ban }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="好友" name="好友">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="pulluprefresh"
        >
          <div class="article_wrap">
            <div v-for="item in recommendlist" :key="item.id">
              <div
                class="con_wrap"
                @click="goarticledetail(item.id, item.cate)"
              >
                <div :class="item.cover == '' ? 'div_quan' : 'div_lf'">
                  <div class="con_wrap_titel">{{ item.title }}</div>
                  <div class="con_wrap_desc">
                    {{ item.desc }}
                  </div>
                </div>
                <div class="div_rt" v-if="item.cover !== ''">
                  <img :src="item.cover" alt="" class="con_pic" />
                </div>
                <div class="bot_con">
                  <div class="ban">阅读 {{ item.look }} · {{ item.user }}</div>
                  <span class="mark">{{ item.ban }}</span>
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import "../../static/js/public_icon_new";
import "../../static/css/public_style.css";
import api from "@/utils/api.js";
export default {
  data() {
    return {
      title: ["推荐", "好友"],
      recommendlist: "", //推荐列表
      friendlist: "", //好友文章列表
      num: "",
      loading: false,
      finished: false,
      page: 1,
      cate: "趣闻",
    };
  },
  computed: {},
  watch: {},
  methods: {
    //切换tab标签
    changetab(name, title) {
      console.log(name, title);
      if (name == "推荐") {
        this.getrecommendlist("趣闻");
        this.cate = "趣闻";
      } else {
        this.getrecommendlist("新闻");
        this.cate = "新闻";
      }
      this.page = 1;
      this.finished = false;
    },

    //推荐文章列表
    getrecommendlist(cate) {
      api
        .postAPI(`/ajax/wenzhang/cate/${cate}`)
        .then((res) => {
          //数据处理
          res.data.data.forEach(function (item) {
            if (item.other_info) {
              item.other_info = "";
            }
            var str = `https://liudediy.com/uploads`;
            item.cover = item.cover.replace(/\/uploads/g, str);
          });
          this.recommendlist = res.data.data;
          this.num = res.data.num;
          console.log(res.data.data, this.recommendlist);
        })
        .catch((err) => console.log(err));
    },

    //文章详情
    goarticledetail(id, cate) {
      this.$router.push({
        path: `/articledetail`,
        query: {
          id: id,
          cate: cate,
        },
      });
    },
    //上拉刷新
    pulluprefresh() {
      var _this = this;
      console.log(11122);
      if (_this.recommendlist.length !== _this.num) {
        (_this.page = _this.page + 1),
          (_this.loading = true),
          (_this.finished = false);
      } else {
        (_this.loading = false), (_this.finished = true);
      }
      if (_this.loading) {
        setTimeout(function () {
          api
            .getAPI(`/ajax/wenzhang?page=${_this.page}&cate=${_this.cate}`)
            .then((res) => {
              //数据处理
              res.data.data.forEach(function (item) {
                var str = `https://liudediy.com/uploads`;
                item.cover = item.cover.replace(/\/uploads/g, str);
              });
              (_this.recommendlist = _this.recommendlist.concat(res.data.data)),
                (_this.loading = false);

              console.log(res);
            })
            .catch((err) => console.log(err));
        }, 1000);
      }
    },
  },
  created() {},
  mounted() {
    this.getrecommendlist("趣闻");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style  scoped>
.article_wrap {
  padding-top: 0.15rem;
}
.m_wrapper >>> .van-tab {
  line-height: 0.3rem;
  font-size: 0.16rem;
  text-align: center;
  color: black;
  font-weight: 700;
  width: 15%;
  flex: none;
  -webkit-flex: none;
  text-align: left;
  -webkit-justify-content: left;
  justify-content: left;
  padding: 0 0 0 0.15rem;
}
.con_wrap {
  padding: 0 0.15rem 0 0.15rem;
  box-sizing: border-box;
  margin-bottom: 0.2rem;
  overflow: hidden;
}

.con_wrap_titel {
  line-height: 0.2rem;
  color: #333333;
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #333333;
  letter-spacing: 0.47px;
  margin-bottom: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.con_wrap_desc {
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #666666;
  letter-spacing: 0.5px;
  line-height: 0.2rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.div_lf {
  width: 70%;
  float: left;
  box-sizing: border-box;
  padding-right: 0.1rem;
}
.div_quan {
  width: 100%;
  float: left;
  box-sizing: border-box;
  padding-right: 0.1rem;
}

.div_rt {
  width: 3%;
  float: left;
  box-sizing: border-box;
}

.con_pic {
  width: 1rem;
  height: 0.7rem;
}

.bot_con {
  clear: both;
  padding-top: 0.1rem;
  line-height: 0.17rem;
  font-family: PingFangSC-Regular;
  font-size: 0.12rem;
  color: #999999;
  letter-spacing: 0;
}

.ban {
  margin-right: 0.2rem;
  float: left;
}

.mark {
  background: #ffb1b1;
  color: white;
  padding: 0 0.1rem;
  float: left;
}
.ad_pic {
  width: 100%;
  height: 1.2rem;
}
</style>
